<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VR看房</title>
    <link rel="stylesheet" href="./lib/photo-sphere-viewer.css" />
</head>
<!-- import Vue.js -->
<script type="text/javascript" src="./lib/vue.js"></script>
<script src="./lib/three.min.js"></script>
<script src="./lib/browser.js"></script>
<script src="./lib/photo-sphere-viewer.js"></script>
<script src="./lib/markers.js"></script>
<script src="./lib/axios.min.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .init-markers {
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        width: 65px;
        height: 70px;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }

    .init-title {
        color: #fff;
        text-align: center;
        padding: 5px;
        font-family: "ali";
        font-size: 15px;
    }

    .init-img {
        width: 25px;
        height: 25px;
    }

    .all-image {
        white-space: nowrap;
        position: fixed;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        width: 100%;

    }

    .thumbnail {
        position: relative;
        margin: 0 5px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;

    }

    .thumb-img {
        width: 80px;
        height: 60px;
    }

    .thumb-text {
        position: absolute;
        bottom: 0;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        text-align: center;
        font-size: 14px;
    }
</style>

<body>
    <div id="vr">
        <div id="viewer" style="width: 100vw; height: 100vh;"></div>
        <div class="all-image" :scroll-x="true">
            <div class="thumbnail" v-for="item in vrList" :key="item.id" @click="onThumbClick(item)">
                <img class="thumb-img" :src="item.panorama" alt="">
                <div class="thumb-text">{{item.name}}</div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#vr',
            data() {
                return {
                    PSV :"",
                    markers:"",
                    psvInd :0,
                    vrList :[{//模拟数据
                        id: "vr1",
                        name: "客厅",
                        panorama: "http://quanjing.hnxsd.org.cn/imgs/11b9f954-e627-484f-accd-a15800667c27.jpg",
                        marker: [//标注点
                            {
                                id: "m1",
                                pid: "vr2",
                                name: "厨房",
                                longitude: 3.2673419550080105,
                                latitude: 0.09113495885316181,
                            },
                            {
                                id: "m2",
                                pid: "vr3",
                                name: "卧室",
                                longitude: 4.610435127431231,
                                latitude: -0.13347147604466092,
                            }
                        ]
                    },
                    {
                        id: "vr2",
                        name: "厨房",
                        panorama: "http://quanjing.hnxsd.org.cn/imgs/a806d7e1-8daa-4d09-a3ac-ce2653977f68.jpg",
                        marker: [//标注点
                            {
                                id: "marker3",
                                pid: "vr1",
                                name: "客厅",
                                longitude: 3.173788604014524,
                                latitude: -0.5938424904165149,
                            }
                        ]
                    },
                    {
                        id: "vr3",
                        name: "卧室",
                        panorama: "https://mp-98a2ae60-e77d-413f-a5c7-2f43caf86665.cdn.bspapp.com/cloudstorage/07f2ecbd-fa51-460f-9f15-9e40fcf79e4f.jpg",
                        marker: [//标注点
                            {
                                id: "marker5",
                                pid: "vr1",
                                name: "客厅",
                                longitude: 3.2030671744657235,
                                latitude: -0.49978530612711314,
                            }
                        ]
                    }]
                }
            },
            mounted(){
                this.initPhotoSphere()
                this.readyEvents()
            },
            methods: {
                initPhotoSphere() {
                    this.PSV = new PhotoSphereViewer.Viewer({
                        container: document.querySelector('#viewer'),  //挂载的DOM元素
                        panorama: this.vrList[this.psvInd].panorama,//全景图路径
                        plugins: [// 标记点
                            [PhotoSphereViewer.MarkersPlugin]
                        ],
                        navbar: false
                    });
                    this.markers = this.PSV.getPlugin(PhotoSphereViewer.MarkersPlugin);
                    this.PSV.once('ready', () => {
                        // 初始化标注坐标
                        this.initMarkers()
                    })
                },
                readyEvents() {
                    // 选中标注事件
                    this.markers.on("select-marker", (e, marker) => {
                        this.psvInd = this.vrList.findIndex(v => v.id === marker.data.pid)
                        this.PSV.setPanorama(this.vrList[this.psvInd].panorama);
                        this.initMarkers()
                    });
                    //全景图片点击
                    this.PSV.on("click", (e, data) => {
                        console.log(`clicked at longitude: ${data.longitude} latitude: ${data.latitude}`);
                    });
                },
                initMarkers() {// 初始化标注坐标
                    this.markers.clearMarkers()
                    this.vrList[this.psvInd].marker.forEach((res) => {
                        this.markers.addMarker({
                            "id": res.id,
                            data: {
                                pid: res.pid
                            },
                            "html": `<div class="init-markers">
                                <div class="init-title point-early-warning">${res.name}</div>
                                <img class="init-img" src="https://minio.gzryzl.com/huatai/2024-04-18/1713421083419arrow.png" alt="">
                            </div>`,
                            longitude: res.longitude,
                            latitude: res.latitude,
                        })
                    })

                },
                onThumbClick (vm){// 缩略图点击切换全景图
                    this.psvInd = this.vrList.findIndex(v=>v.id===vm.id)
                    this.PSV.setPanorama(this.vrList[this.psvInd].panorama);
                    this.initMarkers()
                }
            }
        })
    </script>
</body>
</html>